import React, { memo } from 'react';
import Link from 'next/link';
import { IArtwork } from '@/types/artwork';
import { CARD_STYLES } from '@/constants/styles';

interface ArtworkCardProps {
  work: IArtwork;
  className?: string;
}

const ArtworkCard: React.FC<ArtworkCardProps> = ({ work, className = '' }) => {
  // 在静态导出环境下，链接需要指向.html文件
  const isStaticExport = typeof process !== 'undefined' && process.env.STATIC_EXPORT === 'true';
  const href = isStaticExport ? `/gallery/${work.slug}.html` : `/gallery/${work.slug}`;
  
  return (
    <div className={`${CARD_STYLES.base} ${className}`}>
      <Link href={href} className="block">
        <div className={`relative ${CARD_STYLES.aspectRatio} overflow-hidden bg-paper-dark`}>
          {/* 占位符图片，实际项目中会使用真实图片 */}
          <div className="w-full h-full bg-gradient-to-br from-paper to-paper-dark flex items-center justify-center">
            <p className="text-ink-light text-sm font-medium">{work.title} - 图片占位</p>
          </div>
          
          {/* 悬停效果：半透明覆盖层 */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
            <h3 className="text-white text-lg font-semibold mb-1">{work.title}</h3>
            <p className="text-white/80 text-sm">{work.artist} · {work.year}</p>
          </div>
        </div>
        
        {/* 卡片底部信息 */}
        <div className="mt-3">
          <h3 className="text-ink font-medium text-base mb-1">{work.title}</h3>
          <p className="text-ink-light text-sm">{work.artist} · {work.year}</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {work.category.slice(0, 2).map((category, index) => (
              <span key={index} className={CARD_STYLES.categoryTag}>
                {category}
              </span>
            ))}
          </div>
        </div>
      </Link>
    </div>
  );
};

export default memo(ArtworkCard);